<template>
  <MainLayout />
</template>

<script setup>
import MainLayout from './components/layouts/MainLayout.vue'
import { onMounted } from 'vue'

onMounted(() => {
  const particlesBackground = document.querySelector('.particles-background')
  if (!particlesBackground) return

  // 创建粒子
  for (let i = 0; i < 100; i++) {
    const particle = document.createElement('div')
    particle.className = 'particle'

    // 随机位置和大小
    const size = Math.random() * 5 + 1
    const posX = Math.random() * 100
    const posY = Math.random() * 100
    const delay = Math.random() * 5
    const duration = Math.random() * 20 + 10

    particle.style.width = `${size}px`
    particle.style.height = `${size}px`
    particle.style.left = `${posX}%`
    particle.style.top = `${posY}%`
    particle.style.animationDelay = `${delay}s`
    particle.style.animationDuration = `${duration}s`

    particlesBackground.appendChild(particle)
  }
})
</script>


<style scoped>
.particle {
  position: absolute;
  background-color: rgba(76, 201, 240, 0.5);
  border-radius: 50%;
  pointer-events: none;
  animation: particle-move linear infinite;
  filter: blur(1px);
}
</style>
